<template>
    <div class="form-group">
        <label class="form-control-label">级别</label>
        <div>
            <label class="radio-inline custom_radio me-4">
                <input type="radio" name="optradiolevel" value="la" v-model="level">
                <span class="checkmark"></span> 入门
            </label>
            <label class="radio-inline custom_radio me-4">
                <input type="radio" name="optradiolevel" value="lb" v-model="level">
                <span class="checkmark"></span> 进阶
            </label>
            <label class="radio-inline custom_radio me-4">
                <input type="radio" name="optradiolevel" value="lc" v-model="level">
                <span class="checkmark"></span> 高级
            </label>
        </div>
    </div>
</template>
<script setup>

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
    // 总数量
    modelValue: {
        type: String,
        required: true
    }
})

const level = ref('la')

watch(level, (newVal) => {
    emit('update:modelValue', newVal)
})

watch(() => props.modelValue, (newVal) => {
    level.value = newVal
})
</script>